<!DOCTYPE html>
<html lang="en">
<head>
    <title>映射</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="/static/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="mappingTable" lay-filter="mappingTable"></table>
<script type="text/html" id="mappingToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addMapping">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="flushTable">刷新</button>
    </div>
</script>
<script type="text/html" id="post_table_tool">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
    </div>
</script>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['form', 'table', 'dropdown'], function () {
        const table = layui.table;
        table.render({
            elem: '#mappingTable',
            text: "空空如也",
            skin: "line",
            url: '/proxies',
            toolbar: '#mappingToolbar',
            cellMinWidth: 80,
            cols: [[
                {field: 'clientName', fixed: 'left', width: 150, title: '客户端', sort: true},
                {field: 'name', title: '名称'},
                {
                    field: 'type', title: '协议', sort: true, templet: function (d) {
                        if (d.type === "tcp") {
                            return ' <span class="layui-badge layui-bg-green">TCP</span>';
                        } else if (d.type === "http") {
                            return '<span class="layui-badge">HTTP</span>';
                        }
                    }
                },
                {field: 'remotePort', sort: true, title: '公网端口'},
                {field: 'localPort', sort: true, title: '内网端口'},
                {
                    field: 'status', width: 120, title: '状态', sort: true, templet: function (d) {
                        const isChecked = d.status === 1 ? 'checked' : '';
                        return '<input type="checkbox" lay-skin="switch" lay-text="ON|OFF" lay-filter="statusSwitch" ' + isChecked + '>';
                    }
                },
                {fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#post_table_tool'}
            ]],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });
    });
</script>
</body>
